<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/react.min.js"></script>
    <script src="../js/react-dom.min.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
$(document).ready(
  function() {
    var count = 0;

    var HelloWorld = React.createClass({
        getDefaultProps: function () { //多个组件实例共享，只调用一次
            console.log("1. getDefaultProps");
            return {name: "DefaultUser"}
        },

        getInitialState: function () { // 一个组件调用一次
            console.log("2. getInitialState");
            return {mycount: count++,
                ready: false}
        },

        componentWillMount: function () { // 组件呈现在页面之前调用的方法
            console.log("3. componentWillMount")
        },

        componentWillUpdate: function() { // 不能修改状态和属性
            console.log("componentWillUpdate");
        },

        // 父组件修改属性触发，可以修改新属性、状态
        componentWillReceiveProps: function (newProps){
            console.log(" componentWillReceiveProps");
            console.log("newProps: ", newProps);
        },

        shouldComponentUpdate: function(){ // 返回 false 的话，会阻止 render 调用
            console.log("shouldComponentUpdate");
            return true;
        },

        render: function () {
            console.log("4. render");
            return <p>Hello {this.props.name}. {this.state.ready}, {this.state.mycount}</p>
        },

        componentDidMount: function () { // 组件渲染在页面上之后调用的方法
            console.log("5. componentDidMount");
            //$(React.find(this)).append("  after ")
        },
        
        componentDidUpdate: function () { // 可以修改 DOM
            console.log("componentDidUpdate");
        },

        // 在组件删除之前进行清理操作，比如计时器和事件监听器
        componentWillUnmount: function () {
            console.log("componentWillUnmount");
        }
    });

    var HelloUniverse = React.createClass({
        getInitialState: function () {
            return {name: ''};
        },

        handleChange: function (event) {
            this.setState({name: event.target.value});
        },

        render: function () {
            if(this.state.name === '123'){
                return <div>123</div>;
            }
            return <div>
                <HelloWorld name={this.state.name}/>
                <br />
                <input type="text" onChange={this.handleChange} />
            </div>;
        }
    });

    /*ReactDOM.render(<div><HelloWorld></HelloWorld><HelloWorld name="SHJ"></HelloWorld></div>,
        document.getElementById('root')
    );*/
    ReactDOM.render(<HelloUniverse/>, document.getElementById('root'));
});
</script>
<!--
  Note: this page is a great way to try React but it's not suitable for production.
  It slowly compiles JSX with Babel in the browser and uses a large development build of React.

  To set up a production-ready React build environment, follow these instructions:
  * https://reactjs.org/docs/add-react-to-a-new-app.html
  * https://reactjs.org/docs/add-react-to-an-existing-app.html

  You can also use React without JSX, in which case you can remove Babel:
  * https://reactjs.org/docs/react-without-jsx.html
  * https://reactjs.org/docs/cdn-links.html
-->
</body>
</html>
